import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import LifeCycle from '../components/charts/LifeCycle';
import styles from './HomePage.less';
import MainLayout from '../components/MainLayout/MainLayout';
import {Row, Col,Tooltip,Icon} from 'antd';

class HomePage extends Component {
	constructor(props) {
	      super(props);
	  }
	componentWillMount() {
		window.localStorage.removeItem("menuKey");
		window.localStorage.removeItem("menuPKey");
		window.localStorage.removeItem("gid");
		window.localStorage.removeItem("userListByGroupID"); // 根据用户自定义群组id查询用户列表

		window.localStorage.setItem("imgType", "life_cycle");
	             window.localStorage.setItem("imgTypeValue", "");

	             // loading data
	              this.props.dispatch({
		            type: 'homePage/query',
		            payload: ""
		});
		this.props.dispatch({
		            type: 'homePage/timeListQuery',
		            payload: ""
		});
		this.props.dispatch({
		            type: 'homePage/lifeQuery',
		            payload: ""
		});
	}
	render(){
	  return (
	    <MainLayout isShowLeft="showTimeList" data={{data: this.props.homePage.timeListData, count: this.props.homePage.count}}>
	    <div className={styles.wrap}>
	      <Row type="flex" justify="space-between" gutter={16} className="top_tit">
		      <Col span={8}>
		      	<a href="/" className="on">生命周期</a>
		      </Col>
		      <Col span={8}>
		      <Link to="/MemberLevel">会员等级</Link>		      	
		      </Col>
		      <Col span={8}>
		      	<Link to="/UserGroup">自定义用户组</Link>
		      </Col>
		    </Row>
		    <div className={styles.ui_wrap}>
		    	<h3 className={styles.ui_tit}>
		    		生命周期&nbsp;
		    		<Tooltip placement="right" title={(<span>生命周期是用户与品牌整体互动程度、用户价值的体现，<br />是用户与品牌的关系从一种状态向另一种状态过渡的过程</span>)}>
			          <Icon type="question-circle-o" className={styles.anticon}/>
			        </Tooltip>
		    	</h3>
		    	<div className={styles.chart_box} id="chart_box">
		    		<LifeCycle data={this.props.homePage.lifeData} width = {'100%'} height = {500} />
		    	</div>
		    </div>
		    </div>
	    </MainLayout>
	  );
	}
}

// HomePage.propTypes = {
// 	HomePage: PropTypes.object,
// };
function mapStateToProps({homePage}){
	return {homePage}
}

export default connect(mapStateToProps)(HomePage)